<html>
  <head></head>
  <body>
    <div id="game"></div>
    <script src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
    <script>
        Crafty.init(600, 300, document.getElementById('game'));
        Crafty.background('rgb(127,127,127)');
    
        var options = {
          maxParticles: 20,
          size: 20,
          sizeRandom: 0,
          speed: 1,
          speedRandom: 1.2,
          // Lifespan in frames
          lifeSpan: 29,
          lifeSpanRandom: 7,
          // Angle is calculated clockwise: 12pm is 0deg, 3pm is 90deg etc.
          angle: 180,
          angleRandom: 0,
          startColour: [255, 131, 0, 1],
          startColourRandom: [48, 50, 45, 0],
          endColour: [245, 35, 0, 0],
          endColourRandom: [60, 60, 60, 0],
          // Only applies when fastMode is off, specifies how sharp the gradients are drawn
          sharpness: 20,
          sharpnessRandom: 10,
          // Random spread from origin
          spread: 0,
          // How many frames should this last
          duration: -1,
          // Will draw squares instead of circle gradients
          fastMode: false,
          gravity: { x: 0, y: 0.1 },
          // sensible values are 0-3
          jitter: 0,
          originOffset: {x: 15, y: 20}
        };


        Crafty.e("2D, DOM, Color, platform")
            .color('rgb(0,255,0)')
            .attr({ x: 0, y: 280, w: 600, h: 20 });
            
        var tweenMode = false;
        Crafty.e("2D, Canvas, Color, platform, Tween, Particles")
            .color('rgb(0,255,0)')
            .attr({ x: 100, y: 200, w: 50, h: 20 })
            .tween({x: 450, y: 150}, 2000)
            .bind("TweenEnd", function() {
              tweenMode = !tweenMode;
              if (tweenMode)
                this.tween({x: 100, y: 200}, 2000);
              else
                this.tween({x: 450, y: 150}, 2000);
            })
            .particles(options);

        Crafty.viewport.clampToEntities = false;
        Crafty.viewport.x = -100;
        Crafty.viewport.y = -100;
        Crafty.viewport.scale(1.5);
    </script>
  </body>
</html>
